<template>
    <div class="login-container">
        <div class="login-form">
            <!-- 左侧公司介绍 -->
            <div class="company-info">
                <h1>Hello World</h1>
                <p>more and more comany info...more and more comany info...more and more comany info...more and more
                    comany info...more and more comany info...</p>
            </div>
            <!-- 右侧表单信息 -->
            <form>
                <div class="login-type">
                    <div>注册用户</div>
                </div>

                <!-- 使用手机号登录 -->
                <div class="username-login">
                    <!-- username -->
                    <el-input v-model="phone" class="w-50 m-2" size="large" placeholder="请输入手机号" :prefix-icon="User" />
                    <el-input v-model="passwordOne" type="password" class="w-50 m-2" size="large" placeholder="请输入密码"
                        :prefix-icon="Key" />
                    <el-input v-model="passwordTwo" type="password" class="w-50 m-2" size="large" placeholder="再次确认密码"
                        :prefix-icon="Key" />
                    <!-- <div class="check-code">
                                    <el-input v-model="checkcode" class="w-50 m-2" size="large" placeholder="请输入验证码"
                                        style="width: 120px" />
                                    <el-button>发送验证码</el-button>
                                </div> -->
                    <div class="button-group">
                        <el-button type="primary" @click="checkPsswordToRegister">注册</el-button>
                    </div>
                </div>
            </form>
        </div>
</div>
</template>
    
<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { User } from '@element-plus/icons-vue'
import { Key } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { register } from '@/api/UserApi';

let phone = ref(""); // 手机号
let passwordOne = ref(""); //密码
let passwordTwo = ref(""); //密码

// 注册方法
const goRegister = async (phone: String, password: String) => {
    await register(phone, password).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

const router = useRouter();

const checkPsswordToRegister = async () => {
    if (passwordOne.value == passwordTwo.value) {
        await goRegister(phone.value, passwordTwo.value);
        router.push('/login');
    } else {
        passwordOne.value = "";
        passwordTwo.value = "";
        ElMessage({
            message: "两次密码不一致",
            type: 'error',
        })
    }
}



</script>
    
<style scoped lang="less">
.login-container {
    width: 100wh;
    height: 100vh;
    background-color: #ededed;
    position: relative;
}

// 左侧公司介绍CSS
.company-info {
    width: 440px;
    height: 540px;
    background-image: url('../../src/assets/jeecg_ad.93fbfa48.png');
    background-repeat: no-repeat;
    background-position: right top;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;

    p {
        text-indent: 2em;
        line-height: 40px;
    }

    h1 {
        margin-left: 30px;
    }
}

.login-type {
    width: 100%;
    display: flex;
    font-size: 20px;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    margin: 20px 0;
}

// 注册表单部分
.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px;
    height: 540px;
    background-color: #fff;
    margin: 0 auto;
    display: flex;

    form {
        width: 300px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 10px;
        display: flex;

        flex-direction: column;

        .el-input {
            margin: 15px 0;
        }

        position: relative;

    }

    .button-group {
        display: flex;
        position: absolute;
        bottom: 20px;

        .el-button {
            width: 100%;
        }
    }
}
</style>